<template>
    <div class="person">
        <h1> 在父组件中使用子组件的类型 </h1>
        <h2> 请看 我在 app vue 中的操作 ，我在person.vue 中定义了一个 person ，我想在 App.vue 中使用</h2>
        <h3>姓名：{{ person.name }}</h3>
        <h3>年龄：{{ person.age }}</h3>

        <h4 ref="person"></h4>
    </div> 
</template>

<script lang="ts" setup name = "person">
import { reactive,defineExpose } from 'vue'

let person = reactive({
    name:"小蓝蓝",
    age: 19
})


//能够被父级读取的东西，都需要声明在这里
defineExpose(person)

</script>

<style>
.person {
    width: 100%;
    background-color: rgb(108, 15, 239);
    
    border-radius: 2%;
}
button{
    border: 1px burlywood ;
    border-radius: 3%;
    margin-left: 10px;
    background-color: chocolate;
}
</style>